<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>机器管理</BreadcrumbItem>
      <BreadcrumbItem>机器列表</BreadcrumbItem>
    </Breadcrumb>

    <Form ref="formInline" :model="request" inline>


      <!-- 	<FormItem style="visibility: hidden;">
        <Input type="text" v-model="request.username" clearable placeholder="请输入用户名" />
      </FormItem> -->
      <FormItem>
        <Input type="text" v-model="request.name" clearable placeholder="请输入机器名" />
      </FormItem>

      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
        <Button type="primary" @click="toRealod" v-if="request.manager_id"
                style="margin-right: 10px">重置</Button>
        <Button type="primary" v-hasPermission="['25']" @click="addCall"
                style="margin-right: 10px">添加机器</Button>
        <!-- <Button type="primary" @click="$router.push('/user/add')" style="margin-right: 10px">添加机器</Button> -->
        <Button v-if="showDel" v-hasPermission="['26']" style="margin-right: 10px" @click="alldel">批量删除</Button>
      </FormItem>
    </Form>

    <!-- <div class="form_box"> -->
    <Table :columns="infoID==6?columns2:columns1" :height="height" :data="tableData" :loading="loading"
           @on-selection-change="selectChange">
      <template slot-scope="{ row }" slot="status">
        <!-- <Tag color="success" v-if="row.status == 1" @click.native="setStatus(row.id,2)">启用</Tag>
          <Tag color="error" v-if="row.status == 2" @click.native="setStatus(row.id,1)">禁用</Tag> -->

        <span class="success" v-if="row.status==='1'">启用中</span>
        <span class="error" v-if="row.status==='2'">已被禁用</span>

      </template>
      <template slot-scope="{ row }" slot="option">
        <Button type="primary" v-hasPermission="['27']" size="small" style="margin-right: 5px"
                @click="edit(row)">编辑</Button>
        <Button type="error" v-hasPermission="['26']" size="small" style="margin-right: 5px"
                @click="remove(row)">删除</Button>
        <Button class="button" size="small" v-hasPermission="['26']" :type="row.status == 2?'success':'error' "
                @click="setStatus(row)">
          <span v-if="row.status == 1">禁用</span>
          <span v-else>启用</span>
        </Button>
        <Button type="success" v-hasPermission="['26']" size="small"  @click="add4" style="margin-left: 5px"
        >查看商品</Button>
      </template>
    </Table>

    <!-- </div> -->

    <div style="display: flex;justify-content: center;margin-top: 24px;">
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
            show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
    </div>

    <Modal v-model="modal1" :title="form.id ? '编辑机器' : '添加机器'" :loading="modalLoading" :mask-closable="false"
           @on-ok="confirm" @on-cancel="cancel">
      <Form :model="form" :label-width="110">
        <FormItem label="机器名" v-if="infoID!=6">
          <Input v-model="form.name" placeholder="请输入机器名"></Input>
        </FormItem>
        <FormItem label="经理" v-if="infoID!=6">
          <Select placeholder="请选择" style="width: 120px;" v-model="form.manager_id">
            <Option :value="item.id" v-for="(item,index) in accountList" :key="index">{{item.username}}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="描述">
          <Input v-model="form.description" placeholder="请输入描述"></Input>
        </FormItem>
        <!-- 				<FormItem label="地址">
                  <Input v-model="form.address" placeholder="请输入地址"></Input>
                </FormItem> -->
        <!-- 				<FormItem label="经度">
                  <Input v-model="form.long" placeholder="请输入经度"></Input>
                </FormItem>
                <FormItem label="纬度">
                  <Input v-model="form.lat" placeholder="请输入纬度"></Input>
                </FormItem> -->
        <FormItem label="地址" style="margin-bottom: 30px;">
<!--          <ysMap v-if="showMap" :changeCall="changeAddressCall" :locationInfo="locationInfo"></ysMap>-->
          <Input v-model="form.address" placeholder="请输入地址"></Input>
        </FormItem>
        <FormItem label="经度">
          <Input v-model="form.longitude" placeholder="请输入经度"></Input>
        </FormItem>
        <FormItem label="维度">
          <Input v-model="form.latitude" placeholder="请输入维度"></Input>
        </FormItem>
      </Form>
    </Modal>
    <!--          <Tabs value="name1">-->
    <!--            <TabPane label="未绑定设备" name="name1">-->
    <!--              <Form ref="formInline" :model="request" inline>-->
    <!--                <FormItem>-->
    <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
    <!--                </FormItem>-->
    <!--                <FormItem>-->
    <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
    <!--                </FormItem>-->
    <!--                <FormItem>-->
    <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
    <!--                </FormItem>-->
    <!--                <Table border :columns="columns3" :data="data3"></Table>-->
    <!--              </Form>-->
    <!--            </TabPane>-->
    <!--            <TabPane label="已绑定设备" name="name2">-->
    <!--              <Form ref="formInline" :model="request" inline>-->
    <!--                <FormItem>-->
    <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
    <!--                </FormItem>-->
    <!--                <FormItem>-->
    <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
    <!--                </FormItem>-->
    <!--                <FormItem>-->
    <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
    <!--                </FormItem>-->
    <!--                <Table border :columns="columns3" :data="data3"></Table>-->
    <!--              </Form>-->

    <!--            </TabPane>-->
    <!--          </Tabs>-->
    </Form>
    </Modal>
    <Modal v-model="modal4"    :mask-closable="false" width="1000">
      <Form :label-width="110">
        <div><h4 class="door_device">查看商品详情</h4></div>
        <Form ref="formInline" :model="request" inline>
          <div style="display: flex;">
            <FormItem>
              商品名称: <Input
              type="text"
              clearable
              placeholder="请输入商品名称"
              style="width: 120px"
            />
            </FormItem>
            <FormItem>
              条形码: <Input type="text" v-model="request.username" style="width: 120px" clearable />
            </FormItem>
            <FormItem>
              <Button type="success" @click="add5" style="margin-right: 10px">新增</Button>
            </FormItem>
          </div>
          <div><p>动态商品:</p></div>
          <Table border :columns="columns3" :data="data3"></Table>
        </Form>
        <!--          <Tabs value="name1">-->
        <!--            <TabPane label="未绑定设备" name="name1">-->
        <!--              <Form ref="formInline" :model="request" inline>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
        <!--                </FormItem>-->
        <!--                <Table border :columns="columns3" :data="data3"></Table>-->
        <!--              </Form>-->
        <!--            </TabPane>-->
        <!--            <TabPane label="已绑定设备" name="name2">-->
        <!--              <Form ref="formInline" :model="request" inline>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备编号" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Input type="text"  clearable placeholder="请输入设备名称" />-->
        <!--                </FormItem>-->
        <!--                <FormItem>-->
        <!--                  <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>-->
        <!--                </FormItem>-->
        <!--                <Table border :columns="columns3" :data="data3"></Table>-->
        <!--              </Form>-->

        <!--            </TabPane>-->
        <!--          </Tabs>-->
      </Form>
    </Modal>
    <Modal v-model="modal5"   :mask-closable="false">
      <Form :label-width="110">
        <div class="door_device"><h4>商品列表:</h4></div>
        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
          <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            @click.prevent.native="handleCheckAll">全选</Checkbox>
        </div>
        <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
          <Checkbox label="商品1"></Checkbox><br><br>
          <Checkbox label="商品2"></Checkbox><br><br>
          <Checkbox label="商品3"></Checkbox><br><br>
          <Checkbox label="商品4"></Checkbox><br><br>
          <Checkbox label="商品5"></Checkbox><br><br>
          <Checkbox label="商品6"></Checkbox><br><br>
          <Checkbox label="商品7"></Checkbox><br><br>
          <Checkbox label="商品8"></Checkbox>
        </CheckboxGroup>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import ysMap from '@/components/map'
  export default {
    components: {
      ysMap
    },
    data() {
      return {
        // 多选框：
        indeterminate: true,
        checkAll: false,
        // 设置初始状态选中哪些多选框
        checkAllGroup: [],
        columns3: [
          {
            title: '编号',
            key: 'name',
            minWidth: 100
          },
          {
            title: '商品名称',
            key: 'age',
            minWidth: 200
          },
          {
            title: '条形码',
            key: 'address',
            minWidth: 200
          },
          {
            title: '规格',
            key: 'ge',
            minWidth: 100
          },
          {
            title: '正面图',
            key: 'con',
            minWidth: 100

          },
          {
            title: '背面图',
            key: 'con2',
            minWidth: 100
          },
          {
            title: '侧面图',
            key: 'con3',
            minWidth: 100

          },
          {
            title: '状态',
            key: 'status1',
            minWidth: 100
          },
          {
            title:'创建时间',
            key:'create',
            minWidth: 200

          },
          {
            title:'操作',
            key:'work',
            minWidth: 200
          }
        ],
        data3: [
          {
            name: '001',
            age: '康师傅冰紅茶柠檬味瓶装500ml',
            address: '56163600',
            ge:'大',
            status1:'已上架'



          },
          {
            name: '002',
            age: '康师傅冰紅茶柠檬味瓶装500ml',
            address: '56163601',
            ge:'大',
            status1:'已上架'

          },
          {
            name: '003',
            age: '康师傅冰紅茶柠檬味瓶装500ml',
            address: '56163602',
            ge:'大',
            status1:'已上架'

          },
          {
            name: '004',
            age: '康师傅冰紅茶柠檬味瓶装500ml',
            address: '56163603',
            ge:'大',
            status1:'已上架'
          }
        ],
        width: this.$store.state.width,
        height: this.$store.state.height,
        showDel: false, //批量删除
        type: 1, //1admin 2manager 3operator
        loading: false,
        request: {
          name: '',
          page: 1,
          loading: false
        },
        codeImg: '',
        columns1: [{
          width: 60,
          align: "center",
          type: 'selection'
        },
          {
            title: "机器名",
            key: "name",
            minWidth: 150,
            align: "center"
          },
          {
            title: "机器组经理",
            key: "username",
            minWidth: 150,
            align: "center"
          },
          {
            title: "所属机器组",
            key: "device_group",
            minWidth: 150,
            align: "center"
          },
          {
            title: "状态",
            slot: "status",
            minWidth: 150,
            align: "center"
          },
          {
            title: "地址",
            key: "address",
            minWidth: 250,
            align: "center"
          },

          {
            title: "经度",
            key: "long",
            minWidth: 200,
            align: "center"
          }, {
            title: "纬度",
            key: "lat",
            minWidth: 200,
            align: "center"
          },
          {
            title: "描述",
            key: "description",
            minWidth: 200,
            align: "center"
          },


          {
            title: "创建时间",
            key: "create_time",
            minWidth: 150,
            align: "center"
          },

          {
            title: "操作",
            slot: "option",
            minWidth: 300,
            align: "center",
            fixed: 'right'
          }
        ],
        columns2: [{
          width: 60,
          align: "center",
          type: 'selection'
        },
          {
            title: "机器名",
            key: "name",
            minWidth: 150,
            align: "center"
          },
          {
            title: "所属机器组",
            key: "device_group",
            minWidth: 150,
            align: "center"
          },
          {
            title: "状态",
            slot: "status",
            minWidth: 150,
            align: "center"
          },
          {
            title: "地址",
            key: "address",
            minWidth: 250,
            align: "center"
          },

          {
            title: "经度",
            key: "long",
            minWidth: 200,
            align: "center"
          }, {
            title: "纬度",
            key: "lat",
            minWidth: 200,
            align: "center"
          },
          {
            title: "描述",
            key: "description",
            minWidth: 200,
            align: "center"
          },
          {
            title: "创建时间",
            key: "create_time",
            minWidth: 150,
            align: "center"
          },

          {
            title: "操作",
            slot: "option",
            minWidth: 200,
            align: "center",
            fixed: 'right',
          }
        ],
        tableData: [],
        page: {},
        modalLoading: true,
        modal1: false,
        modal4: false,
        modal5: false,
        form: {
          id: null,
          name: '',
          manager_id: '0',
          long: "0.0",
          lat: "0.0",
          address: "",
          description:''
        },
        accountList: [],
        selectID: [],
        // 默认初始化显示的坐标
        locationInfo: {
          // iocn: "",
          // name: "",
          // longitude: "", // 经度
          // latitude: "", // 纬度
          // address: "" ,// 地址

          iocn: "",
          name: "北京",
          longitude: "116.397228", // 经度
          latitude: "39.909604", // 纬度
          address: "北京" // 地址
        },
        showMap:false
      };
    },
    created() {


      this.infoID = JSON.parse(this.astgo.getItem("ys_prj_info")).role_id;

      if (this.$route.query.manager_id) {
        this.request.manager_id = this.$route.query.manager_id
      }
      this.lists();
      this.getAccount();

    },
    methods: {
      handleCheckAll () {
        if (this.indeterminate) {
          this.checkAll = false;
        } else {
          this.checkAll = !this.checkAll;
        }
        this.indeterminate = false;

        if (this.checkAll) {
          this.checkAllGroup = ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8'];
        } else {
          this.checkAllGroup = [];
        }
      },
      checkAllGroupChange (data) {
        if (data.length === 3) {
          this.indeterminate = false;
          this.checkAll = true;
        } else if (data.length > 0) {
          this.indeterminate = true;
          this.checkAll = false;
        } else {
          this.indeterminate = false;
          this.checkAll = false;
        }
      },
      add4(){
        this.cancel();
        this.modal4 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      add5(){
        this.cancel();
        this.modal5 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      addCall(){
        this.locationInfo. name="北京"
        this.locationInfo.longitude="116.397228" // 经度
        this.locationInfo.latitude= "39.909604"// 纬度
        this.locationInfo.address="北京" // 地址
        this.showMap = false;
        this.$nextTick( function(){
          this.showMap = true;
        } )
        this.modal1 = true;
        this.modal2= true;
      },
      // 获取经纬度，地址信息回调方法
      changeAddressCall(address, lng, lat) {

        console.log(address, lng, lat)

        this.form.address = address;
        this.form.long = lng;
        this.form.lat = lat;

        this.locationInfo.name=address
        this.locationInfo.longitude=lng
        this.locationInfo.latitude=lat
        this.locationInfo.address=address

      },

      alldel() {
        //批量删除
        this.$Modal.confirm({
          title: "确定要删除这些机器吗？",
          onOk: () => {
            // this.$Message.success("删除成功");
            // this.$Message.success('批量删除id:' + JSON.stringify(this.selectID));
            this.axios.post("device/deviceDel", {
              id: this.selectID
            }).then(res => {
              if (res.code == 1) {
                this.$Message.success("删除成功");
                this.lists();
              }
            })

          },
          onCancel: () => {}
        });


      },
      selectChange(selection) {
        console.log('选项发生改变', selection)
        this.selectID = [];
        selection.forEach(item => {
          this.selectID.push(item.id)
        })

        if (this.selectID.length > 0) {
          this.showDel = true
        } else {
          this.showDel = false
        }
        console.log(this.selectID)
      },

      viewSub(row) {
        console.log(row.id)
        this.$Message.success("id:", row.id);
        // this.$router.push('/master/index?account_id=' + row.id);
      },
      search() {
        this.request.page = 1;
        this.lists();
      },
      toRealod() {
        this.request = {
          name: '',
          page: 1,
          loading: false
        }
        this.search();
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.request.page = val;
        this.lists();
      },
      lists() {
        this.loading = true;
        this.axios.post("device/deviceList", this.request).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.tableData = res.data.list;
            this.page.count = res.data.count; // 总条数
            this.page.curPage = res.data.curPage; // 当前页
            this.page.countPage = res.data.countPage; // 总页数
          }
        });



      },
      edit(row) {
        this.form.id = row.id;
        this.form.name = row.name;
        this.form.manager_id = row.manager_id;
        this.form.description =row.description

        this.form.long=row.long
        this.form.lat=row.lat
        this.form.address=row.address

        this.locationInfo.name=row.address ||  "北京"
        this.locationInfo.longitude=(row.long&&row.long!='0.0')?row.long : "116.397228" // 经度
        this.locationInfo.latitude=(row.lat&&row.lat!='0.0')?row.lat : "39.909604"// 纬度
        this.locationInfo.address=row.address ||  "北京" // 地址

        this.showMap = false;
        this.$nextTick( function(){
          this.showMap = true;
        } )

        this.modal1 = true;
      },
      confirm() {
        var url = this.form.id ? 'device/deviceEdit' : 'device/addDevice';

        console.log(this.form)

        // return
        this.axios.post(url, this.form).then(res => {
          if (res.code == 1) {
            this.modal1 = false
            this.$Message.success("操作成功");
            this.cancel()
            this.lists();
          } else {
            this.modalLoading = false;
          }
        });
      },
      remove(row) {
        this.$Modal.confirm({
          title: "确定要删除机器:“" + row.name + "”吗？",
          onOk: () => {

            this.axios.post("device/deviceDel", {
              id: [row.id]
            }).then(res => {
              if (res.code == 1) {
                this.$Message.success("删除成功");
                this.lists();
              }
            })
          },
          onCancel: () => {}
        });
      },
      setStatus(row) {
        var text = "确定要" + (row.status == 2 ? "启用" : "禁用") + "此机器吗？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.axios.post("device/deviceStatus", {
              id: row.id
            }).then(res => {
              if (res.code == 1) {
                this.$Message.success("操作成功");
                this.lists();
              }
            })
          },
          onCancel: () => {}
        });
      },

      cancel() {
        this.form = {
          id: null,
          name: '',
          manager_id: '0',
          long: "0.0",
          lat: "0.0",
          address: "",
          description:''
        };
      },
      getAccount() { //获取所有经理
        this.axios.post("device/getAccount").then(res => {
          if (res.code == 1) {
            this.accountList = res.data;
          }
        });
      },
    }
  };
</script>

<style scoped>
  #amap {
    position: relative;
  }

  .spec_item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .spec_item .input {
    width: 200px;
  }

  .spec_item button {
    margin-left: 10px;
  }
  .door_device{
    position: relative;
    top: -20px;
  }
</style>
